<template>
  <view class="common-card">
    <item-blue-title-view title="权属信息" :show-bar="false"/>
    <view class="f_row_center" style="margin-top: 20rpx">
      <view @click="itemClick(item)" v-for="(item,ind) in list" :style="{'margin-left':ind==0?'':'10rpx'}" :key="ind" class="flex_1 f_column_center  tenure-card">
        <view class="f_row_center">
          <image :src="item.img" style="width: 48rpx;height: 48rpx"/>
          <view class="item-title" style="color: #666666">{{ item.title }}</view>
        </view>
        <span style="font-size: 36rpx">
          {{item.content}}
          <span style="font-size: 24rpx;color: #666666">本</span>
        </span>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import ItemBlueTitleView from "@/pages/components/item_blue_title_view.vue";
import CircleProgressBar from "@/pages/components/circle-progress-bar.vue";
import XRouterConfig from "@/api/XRouterConfig";

@Component({
  components: {
    ItemBlueTitleView,
    CircleProgressBar,
  }
})
export default class DataTenureInfoView extends Vue {
  @Prop() info?: any;


  get list() {
    let total = (this.info.fwCount + this.info.tdCount + this.info.bdcCount) == 0 ? 1 : this.info.fwCount + this.info.tdCount + this.info.bdcCount;
    let list = [
      {
        title: '房屋所有权',
        progress: (this.info.fwCount / total).toFixed(2),
        color: '#3F77F4',
        content: this.info.fwCount,
        path: 'data_tenure',
        type:1,
        img:'/static/fwsyq.png',
      },
      {
        title: '国有土地证',
        progress: (this.info.tdCount / total).toFixed(2),
        color: '#F99F3C',
        content: this.info.tdCount,
        path: 'data_tenure',
        type:2,
        img:'/static/gytdz.png',
      },
      {
        title: '不动产权证',
        progress: (this.info.bdcCount / total).toFixed(2),
        color: '#4ACC9B',
        content: this.info.bdcCount,
        path: 'data_tenure',
        type:3,
        img:'/static/bdcqz.png',
      },
    ];
    return list;
  }

  itemClick(item: any) {
    XRouterConfig.goTo(item.path,{type:item.type})
  }

}
</script>

<style scoped>

.item-title {
  font-size: 26rpx;
}

.item-content {
  font-size: 26rpx;
}

.item-progress {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 26rpx
}
.tenure-card{
  background: #EBF3FF;
  border-radius: 22rpx;
  padding:20rpx 12rpx;
}
</style>